import React, { useState, useEffect } from "react";
import "./My.css";
import { RightOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import axios from 'axios';

// 图标导入

import dai from "../../assets/lkctb/购物袋.png";
import walletIcon from "../../assets/lkctb/钱.png";
import pendingDeliveryIcon from "../../assets/lkctb/我买到的.png";
import pendingReceiptIcon from "../../assets/lkctb/待收货.png";
import afterSaleIcon from "../../assets/lkctb/售后.png";
import favoriteIcon from "../../assets/lkctb/收藏.png";
import addressIcon from "../../assets/lkctb/地址.png";
import orderIcon from "../../assets/lkctb/订单.png";
import customerServiceIcon from "../../assets/lkctb/客服.png";
import settingsIcon from "../../assets/lkctb/设置.png";
import historyIcon from "../../assets/lkctb/足迹.png";

export default function My() {
  const navigate = useNavigate();
  const username = JSON.parse(localStorage.getItem('username'));
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (username) {
      axios.get(`http://127.0.0.1:3000/my?name=${username}`)
        .then(res => {
          setUserData(res.data.data[0]);
          setLoading(false);
        })
        .catch(error => {
          console.error("获取用户数据失败:", error);
          setLoading(false);
        });
    } else {
      setLoading(false);
    }
  }, []);

  // 订单中心选项
  const orderOptions = [
     { icon: dai, label: "我发布的", type: "/mai" },
    { icon: walletIcon, label: "我卖出的", type: "/sell" },
    { icon: pendingDeliveryIcon, label: "我买到的", type: "/bought" },
  ];

  // 基础服务选项
  const serviceOptions = [
    { icon: favoriteIcon, label: "收藏", path: "/collect" },
    { icon: historyIcon, label: "浏览足迹", path: "/history" },
    { icon: addressIcon, label: "收货地址", path: "/address" },
    { icon: customerServiceIcon, label: "帮助与客服", path: "/kefu" },
    { icon: settingsIcon, label: "设置", path: "/setup" }
  ];

  return (
    <div className="my-container">
      {/* 标题 */}
      <h1 className="page-title">我的</h1>

      {/* 用户信息区域 */}
      <div className="user-profile" onClick={() => !username && navigate('/login')}>
        <div className="user-avatar-container">
          {username ? (
            <img 
              src={userData?.image} 
              alt="用户头像" 
              className="user-avatar"
            />
          ) : (
            <div className="default-avatar">
              <i className="icon-user"></i>
            </div>
          )}
        </div>
        <div className="user-info">
          {username ? (
            <h2 className="username">{userData?.username || '用户'}</h2>
          ) : (
            <h2 className="login-prompt">请登录</h2>
          )}
          <p className="user-status">{username ? '已登录' : '未登录'}</p>
        </div>
        <RightOutlined className="arrow-icon" onClick={()=>{
            navigate('/xiu')
        }}/>
      </div>

      {/* 订单中心 */}
      <div className="order-center">
        <div className="section-header">
          <h2>订单中心</h2>
          {/* <div 
            className="view-all" 
            onClick={() => navigate('/orderCenter?type=all')}
          >
            全部 <RightOutlined className="arrow-icon-sm" />
          </div> */}
        </div>
        <div className="order-options">
          {orderOptions.map((option, index) => (
            <div 
              key={index} 
              className="order-option"
              onClick={() => navigate(`${option.type}`)}
            >
              <img src={option.icon} alt={option.label} />
              <span>{option.label}</span>
            </div>
          ))}
        </div>
      </div>

      {/* 基础服务 */}
      <div className="basic-services">
        <h2 className="section-header">基础服务</h2>
        <div className="service-grid">
          {serviceOptions.map((service, index) => (
            <div 
              key={index} 
              className="service-item"
              onClick={() => navigate(service.path)}
            >
              <img src={service.icon} alt={service.label} />
              <span>{service.label}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}